<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>Title</title>
	<style>
		#box {
			background-color: lightblue;
			width: 200px;
			height: 200px;
			opacity: 1;
		}
	</style>
</head>

<body>
	<div id="box"></div>
	<input type="button" value="change" onclick="f1()">

	<script>
			var timerId;

			function f1() {
				var box = document.getElementById("box");
				//            box.style.opacity = "0.5";//字符串
				var opacity = 1;
				//多次点击按钮会创建多个定时器，每次点击按钮的时候把之前的定时器清除
				if(timerId) {
					clearInterval(timerId);
				}
				//开启定时器，动画的方式改变透明度
				timerId = setInterval(function() {
					//设置透明度,字符串！！！！
					box.style.opacity = opacity.toString();
					//如果透明度为0，停止定时器
					if(opacity <= 0) {
						box.style.opacity = "0"; //字符串！！！！
						//清除定时器
						clearInterval(timerId);
					}
					opacity -= 0.1;
				}, 150);
			}
		</script>
</body>

</html>